<template>
  <el-form-item :label="label" :prop="prop">
    <el-switch
        v-model="value"
        :active-color="activeColor"
        :inactive-color="inactiveColor"
        :active-text="activeText"
        :inactive-text="inactiveText"
        :disabled="disabled"
    >
    </el-switch>
  </el-form-item>
</template>

<script>
// noinspection JSUnusedGlobalSymbols
export default {
  name: "SwitchInput",
  props: {
    // 显示标签
    label: {
      type: String,
      default() {
        return ''
      }
    },
    // 表单验证字段名
    prop: {
      type: String,
      default() {
        return ''
      }
    },
    // 清空表单标志位
    clearFla: Boolean,
    // 是否可用
    disabled: {
      type: Boolean,
      default() {
        return false
      }
    },
    // 激活的样式
    activeColor: String,
    // 非激活样式
    inactiveColor: String,
    //激活的文本
    activeText: String,
    // 未激活的文本
    inactiveText: String,

    // 激活值
    activeValue: {
      default() {
        return true
      }
    },
    // 非激活值
    inactiveValue: {
      default() {
        return true
      }
    }
  },
  data() {
    return {
      // 输入的数据
      value: false
    }
  },
  watch: {
    // 通知父组件修改对应数据
    value() {
      let item = this.value ? this.activeValue : this.inactiveValue
      this.$emit('valueChangeEvent',this.prop,item)
    },
    clearFla() {
      this.value = false
    },
  },
  mounted() {
    // 设置value，使用事件形式
    this.$on('setValue', (prop,newValue) => {
      if (prop === this.prop){
        this.value = (newValue === this.activeValue) ? this.activeValue : this.inactiveValue
      }
    })
  }
}
</script>

<style scoped>

</style>
